<template>
	<view class="flex-col page">
		<!-- tabs切换 -->
		<view class="flex-row items-baseline tabs">
			<text @click="changeTabs(index)" class="tabs-item"
				:class="current == index ? 'text_active' : 'text_inactive'" v-for="(item,index) in tabsList"
				:key="index">{{item}}</text>
		</view>
		
		<!-- 助手 -->
		<view v-if="current == 0">
			<scroll-view class="moodlist-scroll" scroll-x>
				<!-- 要想使用flex布局实现横向滚动，就要在scroll-view里加一层容器block包裹，并且使用子组件才会出现滚动效果 -->
				<view class="moodlist">
					<block v-for="(item, index) in moodList" :key="index">
						<view @click="checkMood(index)" class="moodlist-item flex-row justify-center items-center "
							:class="currentMoode == index ? 'text-wrapper' : 'text-wrapper_3' ">
							{{item.title}}

						</view>
					</block>
				</view>
			</scroll-view>
			
			<view class="pdr-30">
				<!-- 猜你想问 -->
				<view class="flex-col section_4 relative">
					<image class="image_6 pos_1" src="/static/zhushou_wechat.png" />
					<text class="self-start font text_4">猜你想问</text>
					<view class="flex-col self-stretch mt-17-5">
						<view class="flex-row items-center quset-item" v-for="(item,index) in questList" :key="index">
							<view class="flex-col justify-start items-center text-wrapper_6"><text
									class="font_4">{{index + 1}}</text>
							</view>
							<text class="quset_text">{{item.title}}</text>
						</view>
					</view>
				</view>
				<!-- 对话 -->
				<view class="">
					<view class="message items-center flex-row"
						:class="item.type == 'user' ? 'justify-end' : 'justify-start'" v-for="(item,index) in message"
						:key="index">
						<view class="" :class="item.type == 'assist' ? 'mess-white' : 'mess-blue'">
							{{item.content}}
						</view>
					</view>
				</view>
				<!-- 提问 -->
				<view class="flex-row justify-between items-center section_5">
					<view class="flex-row items-center">
						<image class="shrink-0 image_8" src="/static/zhushou_phone.png" />
						<input type="text" placeholder-class="font_3 text_5" class=" ml-11-5" placeholder="有问题尽管问我~" />
					</view>
					<image class="image_7" src="/static/zhushou_yuyin.png" />
				</view>
			</view>
		</view>
		
		<!-- 数据 -->
		<view class="pdr-30" v-if="current == 1">
			<!-- 3d展示数据 -->
			<view class="circle-3d">
				<xingqiu ref="tag" :speed="speed" :texts="texts"></xingqiu>
			</view>
			<!-- 心情列表 -->
			<view class="character">
				<!-- <swiper class="swiper" :indicator-dots="false" :autoplay="false" interval="3000" duration="500">
					<swiper-item v-for="(pageData, index) in splitArr" :key="index" class="swiper-item">
						<view class="character-list" :style="{backgroundColor: bgColorList[index]}"
							v-for="(item,index) in pageData" :key="index">
							{{item.title}}
						</view>
					</swiper-item>
				</swiper> -->
				<scroll-view class="character-scroll " scroll-x>
					<!-- 要想使用flex布局实现横向滚动，就要在scroll-view里加一层容器block包裹，并且使用子组件才会出现滚动效果 -->
					<view class="character">
						<block v-for="(item, index) in characterList" :key="index">
							<view @click="checkMood(index)" class="character-list flex-row justify-center items-center " :style="{backgroundColor: item.backgroundColor}"
								>
								{{item.title}}

							</view>
						</block>
					</view>
				</scroll-view>

			</view>
			<!-- 雷达图 ucharts -->
			<view class="charts-box">
				<view class="chart-title">
					性格分析
				</view>
				<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
			</view>
		</view>

		<!-- 底部 tabbar -->
		<view class="page-bottom">
			<tabbar @callback="callback"></tabbar>
		</view>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/tabbar.vue"
	import xingqiu from '@/components/xingqiu/xingqiu.vue'
	// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				message: [{
						type: 'user',
						content: '帮我设置任务提醒 晚上7点半 上英语网课'
					},
					{
						type: 'assist',
						content: '好的，已经为您设置了提醒。请确保您的设备已开启通知功能，以便在晚上7点半时接收提醒。祝您英语网课学习愉快!'
					}
				],//对话列表
				texts: ['计划性', '逻辑性差', '焦虑', '外向', '叛逆期', '专注力', '拖延症', '内向', '计划性', '逻辑性差', '焦虑', '外向', '叛逆期', '专注力',
					'拖延症', '内向', '计划性', '逻辑性差', '焦虑', '外向', '叛逆期', '专注力', '拖延症', '内向', '计划性', '逻辑性差', '焦虑', '外向',
					'叛逆期', '专注力', '拖延症', '内向', '计划性', '逻辑性差', '焦虑', '外向', '叛逆期', '专注力', '拖延症', '内向', '计划性', '逻辑性差',
					'焦虑', '外向', '叛逆期', '专注力', '拖延症', '内向',
				],//3d数据
				speed: 1, //越大越快
				characterList: [{
						title: '活泼好动'
					},
					{
						title: '缺乏耐心'
					},
					{
						title: '焦虑'
					},
					{
						title: '开朗'
					},
					{
						title: '粗心'
					},
					{
						title: '乐观主义'
					},
					{
						title: '热爱生活'
					},
					{
						title: '聪明'
					},
					{
						title: '活泼好动1'
					},
					{
						title: '缺乏耐心1'
					},
					{
						title: '焦虑1'
					},
					{
						title: '开朗1'
					},
					{
						title: '粗心1'
					},
					{
						title: '活泼好动2'
					},
					{
						title: '缺乏耐心2'
					},
					{
						title: '焦虑2'
					},
					{
						title: '开朗2'
					},
					{
						title: '粗心2'
					},
				],//数据--性格列表
				bgColorList: ["#00D2FF", "#33F3B1", "#7368FF","#00D2FF", "#33F3B1","#7368FF","#7368FF",  "#00D2FF" ],//心情列表--背景颜色列表
				chartData: {},//雷达图获取数据
				//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					backgroundColor: 'rgba(115, 104, 255,1)',
					// color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					// 	"#ea7ccc"
					// ],
					color: ['#7368FF'],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					// enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
						backgroundColor: '#91CB74'
					},

					extra: {
						radar: {
							axisLabel: false,
							// gridType: "circle",
							gridColor: "#CCCCCC",
							gridCount: 1,
							opacity: 1,
							max: 100,
							labelShow: true,
							linearType: "custom",
							customColor: ["#f2f0fa", "#f2f0fa"],
							borderWidth: "4",
							border: true,
							gridEval: 1,
							labelPointShow: false
						}
					}
				},//雷达图参数
				gongsi_name: '', //公司名称
				name: '', //人员姓名
				zhiwei: '', //人员职位
				tel: '', //电话号
				chanpin: '', //感兴趣的产品
				status: 2,
				tabsList: ['助手', '数据'],//tabs列表
				moodList: [{
						title: '开心1'
					},
					{
						title: '考试焦虑2'
					},
					{
						title: '自闭倾向3'
					},
					{
						title: '亲子游戏4'
					},
					{
						title: '注意力不集中5'
					},
					{
						title: '暴躁6'
					},
					{
						title: '考试焦虑7'
					},
					{
						title: '自闭倾向8'
					},
					{
						title: '亲子游戏9'
					},
					{
						title: '注意力不集中10'
					},
					{
						title: '暴躁11'
					}
				],//助手--心情列表
				current: 0,//tabs当前选中
				currentMoode: 0,//助手--心情选中
				questList: [{
						title: '适合6月龄宝宝的早教游戏'
					},
					{
						title: '怎么戒吃手指？'
					},
					{
						title: '孩子情绪低落应该怎么沟通？'
					},
					{
						title: '考前焦虑如何调整心情？'
					}
				],//猜你想问列表
				
			}
		},
		components: {
			tabbar,
			xingqiu
		},
		onBackPress() {
			this.$refs.tag.clearTimer();
		},
		// computed: {
		// 	splitArr() {
		// 		// 假设这是你的原始大数组  
		// 		let originalArray = this.characterList;

		// 		// 初始化一个空数组来存储切割后的子数组  
		// 		let chunkedArray = [];

		// 		// 计算需要切割的轮数，注意Math.ceil用于确保如果元素数量不是8的倍数，也能正确切割  
		// 		let chunks = Math.ceil(originalArray.length / 8);

		// 		// 使用for循环来切割数组  
		// 		for (let i = 0; i < chunks; i++) {
		// 			// slice方法从i*8开始切割，直到(i+1)*8（但不包括(i+1)*8），实现每8条数据切割一次  
		// 			// 注意：如果数组长度不是8的倍数，最后一次切割可能会少于8条数据  
		// 			let chunk = originalArray.slice(i * 8, (i + 1) * 8);
		// 			// 将切割后的子数组添加到总数组中  
		// 			chunkedArray.push(chunk);
		// 		}
		// 		return chunkedArray

		// 	}
		// },
		onReady() {
			// this.ctx = uni.createCanvasContext('firstCanvas', this)
			this.getServerData();
		},

		onLoad() {
			
			this.getCharacterList()

		},
		onShow() {
			uni.hideTabBar()
			
		},
		methods: {
			getCharacterList(){
				
				var arr = this.characterList.map((item,index) => {
					var key = index % 8
					return {
						...item,
						backgroundColor: this.bgColorList[key]
					}
				})
				this.characterList = arr
				
			},
			
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["行为习惯", "健康意识", "运动发育", "生活环境", "语言沟通"],
						series: [{

							// data: [90,110,165,195,187]
							name: '性格分析',
							data: [98, 73, 100, 99, 69]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option)
			},
			
			callback() {},
			changeTabs(index) {
				this.current = index
				
			},
			checkMood(index) {
				this.currentMoode = index
			},
			
		}
	}
</script>

<style>
	@import url('../../common/css/common.css');


	.ml-11-5 {
		margin-left: 23rpx;
	}

	.ml-13-5 {
		margin-left: 27rpx;
	}

	.mt-27 {
		margin-top: 54rpx;
	}

	.ml-3 {
		margin-left: 6rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-17-5 {
		margin-top: 35rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.mt-12-5 {
		margin-top: 25rpx;
	}
	.pdr-30 {
		padding-right: 30rpx;
	}

	page {
		background-color: #f5f8ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.page {
		/* padding: 0 30rpx 166rpx; */
		padding: 0 0 166rpx 30rpx;
		padding-bottom: 371rpx;
		background-image: url('../../static/zhushou_top_bg.png');
		background-size: 100% 586rpx;
		background-repeat: no-repeat;
	}

	.tabs {

		margin-top: 49rpx;
	}

	.tabs-item:nth-child(2) {
		margin-left: 31rpx;
	}



	.text_active {
		color: #222222;
		font-size: 52rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 49rpx;
		position: relative;
	}

	.text_active::after {
		position: absolute;
		content: "";
		width: 50rpx;
		height: 15rpx;
		background-image: url("../../static/jihua_tabs_bottom.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		bottom: -26rpx;
		left: 50%;
		transform: translateX(-50%);

	}

	.text_inactive {
		color: #616274;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
		opacity: 0.7;
	}


	.pos_1 {
		position: absolute;
		right: 0;
		top: -129rpx;
	}



	.section_5 {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 200rpx;
		padding: 28rpx 26rpx 31rpx 32rpx;
		width: 673rpx;
		height: 105rpx;
		border-radius: 52rpx;
		background: #ffffff;
		box-shadow: 0 0 35rpx 11rpx #b8cbf840;
	}

	.image_8 {
		width: 44rpx;
		height: 44rpx;
	}

	.quset_text {
		font-weight: 600;
		font-size: 32rpx;
		color: #1C335C 100%;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		color: #1c335c;
	}

	.text_5 {
		color: #616274;
		font-weight: 500;
		opacity: 0.8;
	}

	.image_7 {
		width: 46rpx;
		height: 46rpx;
	}



	.font {
		font-weight: 600;
		font-size: 36rpx;
		color: #1C335C;
	}



	.text-wrapper {
		background-color: #40cee3;
		color: #fff;
		padding: 22rpx 32rpx 23rpx 30rpx;
		border-radius: 34rpx;
		height: 68rpx;
		margin-right: 14rpx;
		margin-bottom: 31rpx;
		font-weight: 500;
		font-size: 24rpx;
	}
	.text-wrapper_3 {
		/* padding: 22rpx 0; */
		padding: 22rpx 32rpx 23rpx 30rpx;
		background-color: #f9f9f9;
		border-radius: 34rpx;
		height: 68rpx;
		margin-right: 14rpx;
		margin-bottom: 31rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #171832;
	}




	.image_6 {
		filter: drop-shadow(0rpx 0rpx 34.96rpx #b8cbf840);
		width: 309rpx;
		height: 219rpx;
	}



	


	.section_4 {
		padding: 44rpx 33rpx 56rpx;
		background-color: #fff;
		filter: drop-shadow(0rpx 0rpx 34.96rpx #b8cbf840);
		border-radius: 24rpx;
		margin-top: 50rpx;
	}



	.text-wrapper_6 {

		filter: drop-shadow(0rpx 0rpx 34.96rpx #cfd8eb40);
		background-image: url('../../static/quest_list_index.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 85rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
	}

	.font_4 {
		font-size: 30rpx;
		font-family: DIN Alternate;
		font-weight: 700;
		color: #ffffff;
	}

	.message {
		width: 691rpx;
		margin: 0 auto;
		margin-bottom: 27rpx;
		margin-top: 45rpx;
	}

	.mess-white {
		max-width: 691rpx;
		border-radius: 32rpx 32rpx 32rpx 4rpx;
		background: #ffffff;
		font-weight: 400;
		font-size: 30rpx;
		color: #171832;
		padding: 28rpx 30rpx;
	}

	.mess-blue {
		max-width: 691rpx;
		border-radius: 32rpx 32rpx 4rpx 32rpx;
		background: linear-gradient(90deg, #5948ff, #3a82ff);
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		padding: 28rpx 30rpx;
	}


	/* 数据 */
	.circle-3d {
		height: 671rpx;
		margin: 0 auto;
		margin-top: 73rpx;
	}

	.character {
		display: flex;
		width: 671rpx;
		display: flex;
		flex-flow: column wrap;
		height: 220rpx;
		margin-bottom: 20rpx;
	}

	/* .swiper {
		width: 671rpx;
	} 

	.swiper-item {
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
	}*/

	
	.character-scroll {
		height: 220rpx;
		
	}
	.character-list {
		border-radius: 30rpx;
		padding: 12rpx 30rpx;
		/* height: 61rpx; */
		margin-left: 26rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-bottom: 32rpx;
		display: flex;
		height: 61rpx;
		margin-top: 18rpx;
		position: relative;
	}

	.character-list:nth-child(even) {
		margin-bottom: 0;
	}

	.charts-box {
		background-color: #fff;
		width: 673rpx;
		/* height: 416rpx; */
		border-radius: 24rpx;
		background: #ffffff;
		box-shadow: 0 0 35rpx 11rpx #b8cbf840;
		margin: 0 auto;
	}

	.chart-title {
		font-weight: 600;
		font-size: 36rpx;
		color: #1C335C;
		padding-top: 41rpx;
		padding-left: 40rpx;
	}
	
	/* 针对整个页面去除滚动条  
	html {  
	  scrollbar-width: none;  
	}  

	scroll-view {
		white-space: nowrap;
	}

	去除滚动条
	.nav-bar::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	} */
	.moodlist-scroll {
		margin-top: 48rpx;
		height: 220rpx;
	}

	.moodlist {
		display: flex;
		flex-flow: column wrap;
		height: 220rpx;
	}
	
	.moodlist-item {
		display: flex;
		position: relative;
	}
	.moodlist-item:nth-child(even) {
		margin-bottom: 0;
	}

	scroll-view {
		white-space: nowrap;
	}

	/* 去除滚动条 */
	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
</style>
